<template>
    <!-- 事件绑定：
      使用v-on:xxx或者@xxx绑定事件，其中xxx事件的名字，v-on:xxx="js片段或者函数名"
      v-on:click简写成click
    -->
    <div class="person">
        <h1>一共有{{ num }}个数据</h1>
        <!-- 事件中直接写js片段 -->
        <button v-on:click="num++">增加一个</button>
        <button v-on:click="num--">减少一个</button>
        <!-- 事件触发一个函数，必须是Vue实例中定义的函数 -->
        <button v-on:click="add">点击事件</button>
        <button @click="add">点击事件</button>
    </div>
</template>


<script setup name="Person">
    import {reactive, ref} from "vue";

    let num = ref(100)

    function add() {
        num.value++
    }
</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
    }

    button {
        margin: 0 5px;
    }
</style>